<template>
    <div class="center-view">
       <div class="avatar">
            <van-image
                round
                width="4.6rem"
                height="4.6rem"
                src="https://img01.yzcdn.cn/vant/cat.jpeg"
                class="avator-icon"
            />
            <div style="font-size: 1.2rem;">立即登录</div>
        </div>
        <div>
            <ul class="my-order-tab">
                <li>
                    <div class="value">0张</div>
                    <div class="label">卖座券</div>
                </li>
                <li>
                    <div class="value">￥99999</div>
                    <div class="label">余额</div>
                </li>
            </ul>
        </div>

        <van-cell title="电影订单" icon="shop-o" is-link class="hias"></van-cell>
        <van-cell title="我的红包" icon="shop-o" is-link class="hias"></van-cell>
        <van-cell title="帮助与客服" icon="shop-o" is-link class="hias"></van-cell>
        <van-cell title="设置" icon="shop-o" is-link class="hias"></van-cell>
    </div>
   
</template>

<script>
import Vue from 'vue'
import { Grid, GridItem } from 'vant';
import { Cell, CellGroup } from 'vant';
import { Image as VanImage } from 'vant';

Vue.use(Grid);Vue.use(GridItem);
Vue.use(Cell);Vue.use(CellGroup);
Vue.use(VanImage);

export default {
    mounted(){
       
    }
}
</script>

<style lang="scss" scoped>
.center-view {
    position: relative;
    top: 0;
    right: 0;
    left: 0;
    font-size: 15px;
    background: #f4f4f4;
    margin-bottom: 59px;
    .avatar {
        text-align: center;
        // margin-top: -44px;
        height: 200px;
        padding-left: 3.6rem;
        // padding-top: 64px;
        background: url(https://assets.maizuo.com/h5/v5/public/app/img/bg.a5bdd690.png);
            background-size: auto;
        background-size: cover;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        color: #fff;
    }
    .avator-icon {
        width: 63px;
        height: 63px;
        border-radius: 35px;
        margin-right: 20px;
        border: 2px solid #fff;
    }
    .my-order-tab {
        width: 100%;
        margin: 0 auto;
            margin-bottom: 0px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        text-align: center;
        font-size: 13px;
        padding: 0;
        height: 79px;
        background: #fff;
        margin-bottom: 10px;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        li {
            position: relative;
            -webkit-box-flex: 1;
            -ms-flex: 1;
            flex: 1;
            list-style: none;
            .value {
                color: #191a1b;
                font-size: 20px;
            }
            .label {
                font-size: 15px;
                color: #797d82;
            }
        }
    }
    .hias{
        height: 49px;
    }
}
</style>